<link rel="stylesheet" href="/assets/home/css/poster.css" />


<header class="mui-bar mui-bar-nav mui-bar-nav-bg">
    <a id="icon-menu" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">推广海报</h1>
</header>

<div class="content">
    <div class="poster">
        <img id="poster" src="{$AutoLogin.poster ? $AutoLogin.poster : ''}" alt="点击按钮重新生成海报" />
    </div>

    <div class="link">
        <input type="text" placeholder="普通输入框" readonly id="url" value="{$url}" />
        <button class="mui-btn mui-btn-primary" type="button" id="btn">点击复制</button>
    </div>

    <div class="update">
        <button class="mui-btn mui-btn-success" type="button" id="update">重新生成海报</button>
    </div>
</div>

<script>
    var btn = document.getElementById('btn')
    var update = document.getElementById('update')
    var poster = document.getElementById('poster').getAttribute('src')

    //复制
    btn.onclick = async function () {
        var url = document.getElementById('url')

        url.select()

        document.execCommand("copy", false)
    }

    //更新
    update.onclick = function () {
        $.ajax({
            type: 'POST',
            dataType: 'json',
            success: (success) => {
                mui.toast(success.msg)

                if (success.code) {
                    $("#poster").prop('src', success.data.poster)
                }
            }
        })
    }

    //如果没有海报地址，就默认触发点击事件
    if (!poster) {
        update.click();
    }
</script>
